/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:24:16
 */
import React, { useRef, useState, useEffect } from "react";
import { Spin, Input, Menu, Modal, Button, Dropdown, Tooltip, Descriptions, Empty, Select, Space, Table, message, Tabs, Popconfirm, Checkbox, Card, Form } from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, AppstoreAddOutlined, SwapOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import queryDB from "@services";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeToTB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import styled from "styled-components";
import api from "../../../services";

import { Area } from "@ant-design/plots";

const DemoArea = ({ className }) => {
	const [total, setTotal] = useState({});
	const [loading, setLoading] = useState(false);
	const [config, setConfig] = useState();

	useEffect(() => {
		asyncFetch();
		loadPower();
	}, []);

	const asyncFetch = async () => {
		setLoading(true);
		let res = await api.trend.spower.byday({ pageindex: 1, pagesize: 20 });
		setLoading(false);
		if (res.msg != 'ok' || !res.data || res.data.length == 0) {
			return;
		}
		let data = [];
		res.data.forEach(t => {
			let date = moment(t.timestamp).format('YYYY-MM-DD');
			data.push({
				date,
				value: parseFloat((t.used_space / 1099511627776).toFixed(3)),
				series: 'used(TB)'
			});
			data.push({
				date,
				value: parseFloat((t.verified_space / 1099511627776).toFixed(3)),
				series: 'verified(TB)'
			});
			data.push({
				date,
				value: parseFloat((t.staking_space / 1099511627776).toFixed(3)),
				series: 'capacity(TB)'
			});
		});
		const c = {
			data: data.reverse(),
			xField: "date",
			yField: "value",
			appendPadding: 5,
			limitInPlot: false,
			xAxis: {
				range: [0, 1],
				tickCount: res.data.length
			},
			seriesField: "series",
			color: ['#adc5fa', '#6493fe', '#3c68ce'],
			legend: false
		};
		setConfig(c);
	};
	const loadPower = async () => {
		setLoading(true);
		let res = await api.total.spower();
		setLoading(false);
		if (res.msg != 'ok') {
			return;
		}
		let d = res.data;
		d.totalStr = formatterSizeToTB(d.total) + ' TB';
		d.useStr = formatterSizeToTB(d.used) + ' TB';
		d.verifiedStr = formatterSizeToTB(d.verified) + ' TB';
		setTotal(d);
	}


	return (
		<div className={className}>
			<Spin spinning={loading}>
				<div className="title" data-api-url="/spower/query/total">
					<div>
						<i style={{ background: "#adc5fa" }}></i>
						<span>
							<label style={{ fontSize: 24 }}>{total.totalStr}</label>
							<font>Capacity</font>
						</span>
					</div>
					<div>
						<i style={{ background: "#6493fe" }}></i>
						<span>
							<label>{total.verifiedStr}</label>
							<font>Verified</font>
						</span>
					</div>
					<div>
						<i style={{ background: "#3c68ce" }}></i>
						<span>
							<label>{total.useStr}</label>
							<font>Used</font>
						</span>
					</div>
				</div>
				<div data-api-url="/spower/query/byday?pageindex=1&pagesize=1000">
					{config ? <Area {...config} /> : <Empty />}
				</div>
			</Spin>
		</div>
	);
};

export default React.memo(styled(DemoArea)`
	display: block;
	overflow: hidden;
	padding: 20px;
	.title{
		display: flex;
		flex-direction: row;
		margin-bottom: 30px;
		height: 40px;
		overflow: hidden;
		div{
			margin-right:20px;
			display: flex;
			flex-direction: row;
			i{
				width:6px;
				height:28px;
				border-radius: 4px;
				display: block;
				overflow: hidden;
				margin-right:12px;
			}
			span{
				label{
					display: block;
					clear:both;
					color: #000000;
					line-height: 20px;
				}
				font{
					font-size: 12px;
					color: #6B7486;
				}
			}
		}
	}
	@media screen and (max-width: 650px) {
		.title{
			display: flex;
			flex-direction: column;
			gap: 15px;
			height:auto;
			overflow: hidden;
		}
	}
`);
